<template>
  <div class="document-container">
    <!-- 顶部导航栏 -->
    <header class="doc-header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">
          <span class="back-icon">←</span>
        </button>
        <div class="doc-info">
          <input type="text" class="doc-title-input" v-model="docTitle" placeholder="2024年度项目计划书">
          <div class="doc-status">已保存</div>
        </div>
      </div>
      <div class="header-right">
        <button class="share-btn">
          <span class="share-icon">👥</span>
          分享
        </button>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 文档内容区 -->
      <main class="doc-content">
        <div class="content-wrapper">
          <rich-editor
            v-model="content"
            placeholder="开始编辑..."
            @change="handleContentChange"
          />
        </div>
      </main>

      <!-- 右侧面板 -->
      <div class="right-panels">
        <!-- 协作者面板 -->
        <div class="collaborators-panel">
          <div class="panel-header">
            <h3>当前协作者</h3>
          </div>
          <div class="collaborators-list">
            <div class="collaborator-item">
              <div class="collaborator-avatar" style="background: #4f46e5">张</div>
              <span class="collaborator-name">张三</span>
              <span class="collaborator-status">编辑中</span>
            </div>
            <div class="collaborator-item">
              <div class="collaborator-avatar" style="background: #22c55e">李</div>
              <span class="collaborator-name">李四</span>
              <span class="collaborator-status">正在查看</span>
            </div>
            <div class="collaborator-item">
              <div class="collaborator-avatar" style="background: #8b5cf6">王</div>
              <span class="collaborator-name">王五</span>
              <span class="collaborator-status">正在查看</span>
            </div>
            <div class="collaborator-item">
              <div class="collaborator-avatar" style="background: #4f46e5">张</div>
              <span class="collaborator-name">赵六</span>
              <span class="collaborator-status">编辑中</span>
            </div>
          </div>
        </div>

        <!-- 文档大纲面板 -->
        <div class="outline-panel">
          <div class="panel-header">
            <h3>文档大纲</h3>
          </div>
          <div class="outline-list">
            <div class="outline-item active">
              <span class="outline-icon">📄</span>
              2024年度项目计划书
            </div>
            <div class="outline-item level-1">
              <span class="outline-icon">1</span>
              项目背景
            </div>
            <div class="outline-item level-1">
              <span class="outline-icon">2</span>
              项目目标
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import RichEditor from '@/components/RichEditor.vue'

const router = useRouter()
const docTitle = ref('2024年度项目计划书')
const content = ref(`
  <h1>2024年度项目计划书</h1>
  <p>本计划书旨在概述公司2024年度的主要项目规划和目标。</p>
  <h2>一、项目背景</h2>
  <p>随着市场需求的不断变化，我们需要调整现有的产品策略，开发更符合用户需求的功能...</p>
  <h2>二、项目目标</h2>
  <ul>
    <li>提升用户满意度达到95%以上</li>
    <li>扩大市场份额至35%</li>
    <li>优化产品性能，提升响应速度30%</li>
  </ul>
`)

const handleContentChange = (value: string) => {
  console.log('内容已更改:', value)
  // 这里可以添加自动保存逻辑
}

const goBack = () => {
  router.push('/home')
}
</script>

<style scoped>
.document-container {
  min-height: 100vh;
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏样式 */
.doc-header {
  height: 64px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.back-icon {
  font-size: 18px;
  color: #64748b;
}

.doc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-title-input {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  border: none;
  outline: none;
  background: transparent;
  width: 300px;
}

.doc-status {
  font-size: 12px;
  color: #64748b;
}

.share-btn {
  height: 36px;
  padding: 0 16px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn:hover {
  background: #4338ca;
}

/* 主要内容区布局 */
.main-content {
  display: flex;
  margin-top: 75px;
  width:100vw;
  height: calc(100vh - 75px);
}

/* 文档内容区样式 */
.doc-content {
  padding: 35px 15px;
  overflow-y: auto;
  width: 100%;
}

.content-wrapper {
  max-width: 80vw;
}

/* 右侧面板样式 */
.right-panels {
  position: fixed;
  top: 5.7%;
  right: 0;
  width: 320px;
  height: calc(100vh - 112px);
  border-left: 1px solid #e2e8f0;
  background: white;
  display: flex;
  flex-direction: column;
  height: 92%;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 8px;
}

.panel-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

/* 协作者面板样式 */
.collaborators-panel {
  border-bottom: 1px solid #e2e8f0;
}

.collaborators-list {
  padding: 12px 24px;
}

.collaborator-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.collaborator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.collaborator-name {
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
}

.collaborator-status {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
}

/* 文档大纲面板样式 */
.outline-panel {
  border-bottom: 1px solid #e2e8f0;
}

.outline-list {
  padding: 12px 24px;
}

.outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.outline-item:hover {
  color: #1e293b;
}

.outline-item.active {
  color: #4f46e5;
  font-weight: 500;
}

.outline-item.level-1 {
  padding-left: 24px;
}

.outline-icon {
  font-size: 14px;
  color: #64748b;
}
</style>
